<template>
	<view class="contain" :style="{ 'padding-top': top + 'px' }">


	<view class="flex f-s-0 h-44   box-c" :style="{ 'padding-top': top + 'px' }">
			<view @click="back(1)" class="flex padding-lr10 f-a-c van-icon van-icon-arrow-left f20-size"></view>
			<view class="flex f-a-c flex-1">

				<getlocation  :type="0" color="#000000"></getlocation>

			</view>
			<view class="flex f-a-c flex-2">
				<view class="flex flex-1 h-32  b-radius-30 bg-color-f9 padding-lr4">
					<text class="flex f-a-c f-s-0 van-icon van-icon-search padding-lr2 f18-size t-color-0 margin-r6"></text>
					<view class="flex flex-1 h100">
						<input @confirm="search" v-model="value" type="text" value="" class="input f12-size" :placeholder="i18n['搜索']" />
					</view>
					<view class="flex f-a-c h100">
						<view @click="search()" class="flex f-a-c f-j-c f-s-0 w-50 b-radius-30 h-26 bg-color-linear-y t-color-w f12-size">{{i18n['搜索']}}</view>
					</view>
				</view>
			</view>
			<view class="flex f-s-0 f-a-c f-j-c padding-lr6 f20-size"></view>
			<xcx-header></xcx-header>
	</view>

				<!-- 	<view class="flex-row items-center group justify-between"  style="padding: 30rpx "  >





							  <view class="flex-row justify-between items-center flex-auto "  style="margin-right:15px;margin-left:5px; margin-left: 18px; padding-left: 6px; background-color: #ffffff;  border-radius: 145px; height: 26px; border: solid 1px #ffbd52;" >
								<view class="flex-row items-center">
								  <image
									class="shrink-0 image_5"
									src="https://qiniu.ccchongya.com/chongya/images/16947555484195366345.png"
								  />
								  <text class="font_3 text_3" style="
		">            </text>
								</view>
								<view class="flex-col justify-start items-center text-wrapper"  style=" padding: 8px 0; background-color: #ffbd52;border-radius: 82px;width: 46px;height: 25px;border:1px solid #fff;" ><text class="font_2 "  style="color:#ffffff" >搜索</text></view>
							  </view>



					</view> -->





		           <view class="flex-col flex-auto group">
		             <view class="flex-col group_2 space-y-16">

		               <view class="flex-col space-y-12">
						   <view class="flex-col list-item_3 space-y-16" v-for="(item, index) in list" :key="index" @click="go('/pages/other/adopt/detail?id='+item.id)" >
						     <view class="flex-col group_6 space-y-16">
						       <text class="self-start font_1">发布时间：{{item.createTime | time}}</text>
						       <view class="flex-row items-center space-x-25">
						         <image  class="image_6" :src="item.cover" mode="aspectFill" />
						         <view class="flex-col space-y-10">
						           <view class="flex-row items-center space-x-8">
						             <image
						               class="image_7"
						               src="https://qiniu.ccchongya.com/chongya/images/16947555487831642959.png"
						             />
						             <text class="font_3 text_10">{{item.title}}</text>
						             <view class="flex-col justify-start items-center text-wrapper_2" v-if="item.petBreeds"><text class="font_2">{{item.petBreeds}}</text></view>
						           </view>
						           <text class="font_1">{{item.intro}}</text>
						           <view class="flex-row space-x-8">
						             <!-- <view class="flex-col justify-start items-center text-wrapper_3"><text class="font_2">{{item.petBreeds}}</text></view> -->
						             <view class="flex-col justify-start items-center text-wrapper_3"  v-if="item.petStatus"><text class="font_2">{{item.petStatus}}</text></view>
						             <view class="flex-col justify-start items-center text-wrapper_3"  v-if="item.petAge"><text class="font_2">{{item.petAge}}</text></view>
						             <view class="flex-col justify-start items-center text-wrapper_3"  v-if="item.petMedicine">
						               <text class="font_2 text_11">{{item.petMedicine}}</text>
						             </view>
						           </view>
						         </view>
						       </view>
						     </view>
						     <view class="flex-col group_7 space-y-8" >
						       <text class="self-start font_4">领养要求：</text>
						       <text class="font_4 text_12">{{item.content}}</text>
						     </view>
						     <view class="flex-row justify-between group_8" @tap="makePhone(item.mobile)">
						       <text class="font_4">领养电话：{{item.mobile | fixNumber}}</text>
						       <image
						         class="image_8"
						         src="https://qiniu.ccchongya.com/chongya/images/16947555483658337900.png"
						       />
						     </view>
						   </view>

		                 </view>
						 
						 <no-data v-if="list.length <= 0"></no-data>
		               </view>
		             </view>



					 <div @click="go('/pages/other/adopt/add')"
					 style="word-wrap: break-word;font-size:30rpx;width:120rpx;height:120rpx;padding:20rpx;text-align:center;position: fixed;bottom:200rpx;right:50rpx;background:#ffc300 ;color:#fff;border-radius: 50%;">
					 	发布领养
					 </div>



 <uni-popup ref="popup">

 </uni-popup>


	</view>
</template>
<style scoped>
	page {

	background-image: linear-gradient(180deg, #ffc300 6.5%, #ffffff 60.8%);
	width: 100%;
/* 	overflow-y: auto;
	overflow-x: hidden; */
	height: 100%;
	padding-top:60rpx
	}
	.group_2 {
	padding: 0 24rpx;
	}
	.group_3 {
	padding-left: 8rpx;
	}
	.image_4 {
	width: 38rpx;
	height: 38rpx;
	}
	.font_1 {
	font-size: 24rpx;
	font-family: HarmonyOSSansSC;
	line-height: 22rpx;
	color: #666e7a;
	}
	.text_2 {
	margin-left: 16rpx;
	color: #081329;
	}
	.section {
	margin-left: 44rpx;
	padding-left: 16rpx;
	background-color: #ffffff;
	border-radius: 342rpx;
	height: 62rpx;
	border: solid 2rpx #ffbd52;
	}
	.image_5 {
	width: 32rpx;
	height: 30rpx;
	}
	.font_2 {
	font-size: 20rpx;
	font-family: HarmonyOSSansSC;
	line-height: 18rpx;
	color: #ffffff;
	}
	.text_3 {
	color: #6d6a6b;
	line-height: 19rpx;
	}
	.text-wrapper {
	padding: 20rpx 0;
	background-color: #ffbd52;
	border-radius: 194rpx;
	width: 108rpx;
	height: 60rpx;
	}
	.text_4 {
	color: #ffffff;
	}
	.space-y-12 > view:not(:first-child),
	.space-y-12 > text:not(:first-child),
	.space-y-12 > image:not(:first-child) {
	margin-top: 24rpx;
	}
	.list-item {
	padding: 32rpx 16rpx 48rpx 32rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	filter: drop-shadow(0px 0px 8rpx #ffbd5208);
	overflow: hidden;
	}
	.image_6 {
	border-radius: 398rpx;
	width: 160rpx;
	height: 160rpx;
	}
	.group_4 {
	margin: 8rpx 0 8rpx 50rpx;
	}
	.space-x-8 > view:not(:first-child),
	.space-x-8 > text:not(:first-child),
	.space-x-8 > image:not(:first-child) {
	margin-left: 16rpx;
	}
	.image_7 {
	width: 32rpx;
	height: 32rpx;
	}
	.font_3 {
	font-size: 32rpx;
	font-family: HarmonyOSSansSC;
	line-height: 26rpx;
	color: #081329;
	}
	.text_5 {
	line-height: 27rpx;
	}
	.text-wrapper_2 {
	padding: 12rpx;
	background-color: #4578ff;
	border-radius: 4rpx;
	/* width: 80rpx; */
	height: 40rpx;
	}
	.text_6 {
	line-height: 24rpx;
	}
	.text-wrapper_3 {
	padding: 12rpx 0;
	background-color: #ffbd52;
	border-radius: 370rpx;
	width: 80rpx;
	height: 40rpx;
	}
	.text_7 {
	line-height: 19rpx;
	}
	.space-y-10 > view:not(:first-child),
	.space-y-10 > text:not(:first-child),
	.space-y-10 > image:not(:first-child) {
	margin-top: 20rpx;
	}
	.space-y-16 > view:not(:first-child),
	.space-y-16 > text:not(:first-child),
	.space-y-16 > image:not(:first-child) {
	margin-top: 32rpx;
	}

	.list-item_3 {
	padding: 0 28rpx 36rpx 32rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	filter: drop-shadow(0px 0px 8rpx #ffbd5208);
	overflow: hidden;
	}
	.group_6 {
	padding: 32rpx 4rpx 44rpx;
	border-bottom: solid 1.2rpx #0000002b;
	}
	.space-y-16 > view:not(:first-child),
	.space-y-16 > text:not(:first-child),
	.space-y-16 > image:not(:first-child) {
	margin-top: 32rpx;
	}
	.space-x-25 > view:not(:first-child),
	.space-x-25 > text:not(:first-child),
	.space-x-25 > image:not(:first-child) {
	margin-left: 50rpx;
	}
	.text_10 {
	line-height: 27rpx;
	}
	.text_11 {
	line-height: 19rpx;
	}
	.group_7 {
	padding: 40rpx 4rpx 0;
	}
	.space-y-8 > view:not(:first-child),
	.space-y-8 > text:not(:first-child),
	.space-y-8 > image:not(:first-child) {
	margin-top: 16rpx;
	}
	.font_4 {
	font-size: 28rpx;
	line-height: 26rpx;
	color: #000000;
	}
	.text_12 {
	color: #081329a8;
	line-height: 44rpx;
	}
	.group_8 {
	margin-top: 52rpx;
	padding: 0 4rpx;
	}
	.image_8 {
	margin-right: 20rpx;
	width: 28rpx;
	height: 28rpx;
	}
</style>
<script>


const $ = require('@/utils/api.js');
const API = require('@/utils/api/common.js').default;
import loadMore from '@/components/load-more/load-more.vue';
import moment from '@/utils/moment';
let self = this;
export default {
	name: 'Integral',
	components: {
		loadMore
	},
	computed: {
		i18n() {
			return this.$t('search')
		},
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getList('refresh');
	},
	filters: {
		fixNumber: function(value) {
			
			var tel = value;
			tel = "" + tel;
			var tel1 = tel.substr(0,3) + "****" + tel.substr(8)
			console.log(tel1);
			return tel1;
		}
	},
	

	data() {
		return {

			top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
			isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
			isLogin: uni.getStorageSync('token') ? true : false,
			navList: [{ name: '分值明细' }, { name: '分值提升' }],
			current: 0,
			list: [],
			loadingType: 'more',
			page: 1,
			userInfo: {},
			loading: true,
			value: '',
		};
	},
	onLoad() {
		this.initData();

	},
	// filters: {
	// 	time(val) {
	// 		return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
	// 	},
	// 	numFilter(val) {
	// 		return val >= 0 ? `+${val.toString()}` : val;
	// 	}
	// },
	// 加载更多
	onReachBottom() {

		  if (this.loadingType === 'nomore') return;
		this.page++;
		this.getList();
	},
	methods: {

	 // 弹出层显示
	    openPopup() {
	      this.$refs.popup.open();
	    },
	    // 弹出层隐藏
	    closePopup() {
	      this.$refs.popup.close();
	    },
		toCategory() {
			this.$mRouter.reLaunch({ route: '/pages/category/category' });
		},
		nav(index) {
			this.loading = true;
			this.current = index;
			this.page = 1;
			this.list.length = 0;
			this.getList();
		},
		initData() {
			   setTimeout(()=>{
				   this.openAuthYk("ACCESS_FINE_LOCATION")
				   },500)
			this.userInfo = uni.getStorageSync('userInfo') || undefined;
			this.getList();
		},
		async getList(type) {
			await this.$http
				.get(`${API.assistList}`, {
					type: 2,
					page: this.page,
					keyword: this.value
				})
				.then(r => {
							console.log(r.data);
					this.loading = false;
					this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
					this.list = [...this.list, ...r.data.list];
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		search() {
			if(this.value == ''){
				$.$toast(this.i18n['请输入搜索内容']);
				return;
			}
			this.loading = true;
			// this.current = index;
			this.page = 1;
			this.list = [];
			this.getList();
		},
	}
};
</script>
